import './App.css';
import EchartsBar from './sub-module/leftbottom';
import EchartsBarRight from './sub-module/rightbottom';
import EchartsMap from './sub-module/lefttop';
import EchartsLine from './sub-module/righttop';
import axios from 'axios';
import { useState, useEffect } from 'react';


function App() {
  const getMsg = (msg) => {
    console.log('这是在父模块里打印的：', msg)
  }

  let [tem1, setTem1] = useState([])
  let [tem2, setTem2] = useState([])
  let [date, setDate] = useState([])


  useEffect(() => {
    console.log("组件加载完成后执行的！！！")
    getCodeMapMsg('太原')
  }, []); // 依赖项数组，为空数组意味着仅在组件挂载时执行

  //获取子模块传过来的参数
  const getCodeMapMsg = (dataMap) => {
    console.log(dataMap, 1111111)
    axios.get('https://v1.yiketianqi.com/api', {
      params: {
        appid: 23035354,
        appsecret: '8YvlPNrz',
        version: 'v9',
        cityid: 0,
        city: dataMap,
        ip: 0,
        callback: 0
      }
    })
      .then(function (response) {
        console.log(response)
        //得到未来7天的天气情况
        let jsonArrayData = response.data.data;
        //得到未来7天的日期、最高温度、最低温度
        let arrDate = []
        let arrTem1 = []
        let arrTem2 = []
        for (let jsonArr of jsonArrayData) {
          let { date, tem1, tem2 } = jsonArr
          arrDate.push(date)
          arrTem1.push(tem1)
          arrTem2.push(tem2)
        }
        setTem1(arrTem1)
        setTem2(arrTem2)
        setDate(arrDate)
        // console.log(arrDate, arrTem1, arrTem2)
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  return (
    <div className="App">
      <div className="AppTop"><h1>大数据可视化标题</h1></div>
      <div className="AppButtom">
        <div className="AppButtomLeft">
          <div className="AppButtomLeftTop">
            <EchartsMap onGetCodeMapMsg={getCodeMapMsg}></EchartsMap>
          </div>
          <div className="AppButtomLeftBottom">
            <EchartsBar
              myData={[10, 52, 200, 334, 390, 330, 220]}
              myText={['周一', '周二', '周三', '周四', 'Fri', 'Sat', 'Sun']}
              onGetMsg={getMsg}
            >
            </EchartsBar>
          </div>
        </div>
        <div className="AppButtomRight">
          <div className="AppButtomRightTop">
            <EchartsLine tem1={tem1} tem2={tem2} date={date}></EchartsLine>
          </div>
          <div className="AppButtomRightCentral">中</div>
          <div className="AppButtomRightBottom">
            <EchartsBarRight
              dataX={[2, 1.2, 2.4, 3.6]}
              dataY={['张三', '李四', 'c', 'd']}
            >环形柱图</EchartsBarRight>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App;
